<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="me"> <button id="connect" onclick="lianjie()">连接</button><br>
<input id="toUser">对方的名字<br>
<input id="msg">要发送的内容<br>
<button id="send" onclick="send()">发送</button><br>
<br><br><br>
<button id="close" onclick="wsclose()">关闭</button><br>
<br>
<br>

<span id="content"></span>
</body>


<script type="text/javascript">
    var ws =null;

    function lianjie()
    {
        if ("WebSocket" in window)
        {
           // alert("您的浏览器支持 WebSocket!");
            var name = document.getElementById("me").value;
            // 打开一个 web socket
            ws = new WebSocket("ws://"+location.host+"/websocket/"+name);
            ws.onopen = function()
            {
             setData('打开连接')
            };

            ws.onmessage = function (evt)
            {
                setData(evt.data);
            };

            ws.onclose = function()
            {
             setData('连接关闭')
            };
        }

        else
        {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }

    function setData(data){
        var content = document.getElementById("content");
        content.innerHTML = data;
    }



    function send(){
        if (ws != null) {
            var toUser = document.getElementById("toUser").value;///接收者
            var msg = document.getElementById("msg").value;//内容

            var message ='{"toUser":"'+toUser+'","msg":"'+msg+'"}';
            //发送消息
            ws.send(message);
        }


    }

    function wsclose(){
        if (ws != null) {
           ws.close()
        }


    }
</script>
</html>